<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="dialogTitles[titleIndex] || titleIndex" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <custom-form formRef="add" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'operationForm',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    dictMap: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        operId: '',
        title: '',
        businessType: '',
        operName: '',
        operLocation: '',
        operIp: '',
        status: '',
        operTime: '',
        costTime: 0,
      },
      // 表单配置项
      formItemConfig: [
        {
          label: '日志编号',
          prop: 'operId',
          span: 12,
          clearable: true,
        },
        {
          label: '系统模块',
          prop: 'title',
          span: 12,
          clearable: true,
        },
        {
          label: '类型',
          prop: 'businessType',
          component: 'BaseSelect',
          span: 12,
          clearable: true,
        },
        {
          label: '操作人员',
          prop: 'operName',
          span: 12,
          clearable: true,
        },
        {
          label: '操作地址',
          prop: 'operIp',
          span: 12,
          clearable: true,
        },
        {
          label: '操作状态',
          prop: 'status',
          component: 'BaseSelect',
          span: 12,
          clearable: true,
        },
        {
          label: '操作日期',
          prop: 'operTime',
          component: 'BaseDateTimePicker',
          defaultTime: '2021-10-10 00:00:00',
          span: 12,
          clearable: true,
        },
        {
          label: '消耗时间',
          prop: 'costTime',
          span: 12,
          clearable: true,
          class: 'millisecond',
        },
      ],
      // 表单验证
      formRules: {
        name: {
          required: true,
          message: '类型名称不能为空',
          trigger: 'blur',
        },
        area: {
          required: true,
          message: '创建时间不能为空',
          trigger: 'blur',
        },
      },
    };
  },
  computed: {
    ...mapState('dialog', ['dialogTitles']),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        this.formModel = JSON.parse(JSON.stringify(this.formData));
        this.setDictList();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    // 设置formItemConfig里面的字典列表
    setDictList() {
      if (this.dictMap) {
        // 操作类型
        this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'businessType')].options = this.dictMap.type.sys_oper_type;
        // 操作状态
        this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'status')].options = this.dictMap.type.sys_common_status;
      }
    },
    submitFrom() {
      this.cancel();
    },
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
